<template>
	<view class="chat">
		<view ref="box" class="box" @click="judeg = true">
			<view v-for="(item,index) in messageList" :key="index">
				<view class="left" v-if="item.senderUserId != userId">
					<view v-if="item.content.type && item.content.type == 'imgMsg'">
						<image class="tx" mode="aspectFill" :src="item.content.user && item.content.user.portraitUri" @click="toUserInfo(item)"/>
						<image mode="widthFix" :src="item.content.content" alt="" @click="previewImage(item)"/>
					</view>
					<view v-else-if="item.content.type && item.content.type == 'vioceMsg'">
						<image  class="tx"  mode="aspectFill" :src="item.content.user && item.content.user.portraitUri || '../../static/img/gls1.png'"  @click="toUserInfo(item)"></image>
						<text @click="playVoice(item,index)"  :style="{width: Math.floor(item.content.time/100*460)+'px'}">{{ Math.floor(item.content.time)}}s<image class="voice-icon" v-if="!item.play" mode="widthFix" src="../../static/img/voice_play_stop.png"><image class="voice-icon" v-else mode="widthFix" src="../../static/img/voice_play.gif"></text>
					</view>
					<view v-else>
						<image class="tx"  mode="aspectFill" :src="item.content.user && item.content.user.portraitUri"  @click="toUserInfo(item)"></image>
						<text>{{item.content.content}}</text>
					</view>
				</view>
				<view class="right" v-else>
					<view v-if="item.content && item.content.type == 'imgMsg'">
						<image class="tx" mode="aspectFill" :src="item.content.user && item.content.user.portraitUri || '../../static/img/gls1.png'"  @click="toUserInfo(item)"></image>
						<image mode="widthFix" :src="item.content.content" alt="" @click="previewImage(item)"/>
					</view>
					<view v-else-if="item.content.type && item.content.type == 'vioceMsg'">
						<image  class="tx"  mode="aspectFill" :src="item.content.user && item.content.user.portraitUri || '../../static/img/gls1.png'"  @click="toUserInfo(item)"></image>
						<text @click="playVoice(item,index)"  :style="{width: Math.floor(item.content.time/100*460)+'px'}">{{ Math.floor(item.content.time)}}s<image class="voice-icon" v-if="!item.play" mode="widthFix" src="../../static/img/voice_play_stop.png"><image class="voice-icon" v-else mode="widthFix" src="../../static/img/voice_play.gif"></text>
					</view>
					<view v-else>
						<image  class="tx"  mode="aspectFill" :src="item.content.user && item.content.user.portraitUri || '../../static/img/gls1.png'"  @click="toUserInfo(item)"></image>
						<text>{{item.content.content}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="content">
				<image src="../../static/img/member/keyboard@2x.png" @click="voiceStatus = !voiceStatus"></image>
				<textarea type="text" maxlength="800" :auto-height="wordWrap" v-model="message" @linechange="inputContent" @input="onInput" v-show="!voiceStatus"></textarea>
				<view v-if="voiceStatus" @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend"  :class="['voiceBtn',isTouch?'on':'']" >按住说话</view>  
				<image src="../../static/img/member/add@2x.png" @click="showMoreOperation().then(()=>{scrollBottom()})"></image>
				<text v-if="messageNone" @click="sendmessage().then(()=>{scrollBottom()})">发送</text>
			</view>
			<view class="function" v-if="!judeg">
				<image src="../../static/img/member/photoAlbum@2x.png" @click="chooseImg"></image>
				<image src="../../static/img/member/shoot@2x.png" @click="cameraImg"></image>
				<image src="../../static/img/member/voiceCommunication@2x.png" @click="tips"></image>
				<image src="../../static/img/member/vedioCall@2x.png" @click="tips"></image>
			</view>
		</view>
		<view class="voice-loading" v-if="showVioceLoading">
			<image src="../../static/img/voice.gif" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	document.addEventListener("mousedown", function(e){
	  if(e.target.tagName!=="TEXTAREA"){
		e.preventDefault()
	  }
	}, false);
	const RongIMLib = require('@/static/js/IMSDK/RongIMLib-3.0.7-dev');
	// const im = RongIMLib.init({ appkey: 'qf3d5gbjq9qxh' });
	import {getUrlParam} from '@/static/js/filter.js'
	import { pathToBase64, base64ToPath } from '@/js_sdk/gsq-image-tools/image-tools/index.js'
	var timeOutEvent = 0 ;//定时器  
	export default {
		data() {
			return {
				judeg: true,
				messageNone: false,
				wordWrap: true,
				messageList:[],
				toUserId:'',
				message:'',
				groupId:decodeURI(getUrlParam('groupId')),
				groupName:decodeURI(getUrlParam('groupName')),
				groupLeader:'', //群主
				voiceStatus:false,
				showVioceLoading:false,
				isTouch:false,
				startY:'',
				images:[],
				userId:localStorage.IMCOEDID
			}
		},
		onLoad(){
			const _this = this;
			_this.messageList = [];
			setTimeout(()=>{
				_this.$wx.initJssdk()
				_this.load()
			},800)
		},
		onPullDownRefresh(){
			if(!this.messageList[0].sentTime){
				return;
			}
			this.getMessage(this.messageList[0].sentTime)
		},
		onNavigationBarButtonTap(e){
			uni.navigateTo({
				url:encodeURI('/pages/imchat/editgroup?addpeople=true&groupId='+this.groupId+'&groupName='+this.groupName+'&groupLeader='+this.groupLeader)
			})
		},
		methods:{
			// 调用相机
			chooseMedia() {
				uni.chooseMedia({
				  count: 9,
				  mediaType: ['image','video'],
				  sourceType: ['camera'],
				  maxDuration: 30,
				  camera: 'back',
				  success(res) {
				    console.log(res.tempFilest)
				  }
				})
			},
			// 点击语音跟视频聊天提示框
			tips() {
				uni.showToast({title: '正在开发~',icon:'none'});
				return
			},
			// 预览图片
			previewImage(item){
				const findIndex = this.images.findIndex((a)=>{ return a == item.content.imageUri});
				uni.previewImage({
				   urls: this.images,
				   current:findIndex,
				   longPressActions: {
					   success: function(data) {
						   console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					   },
					   fail: function(err) {
						   console.log(err.errMsg);
					   }
				   }
				});
			},
			load(){
				const _this = this;
				var conversationList = [];
				_this.$im.watch({
					conversation: function(event){
						var updatedConversationList = event.updatedConversationList;
						console.log('更新会话汇总:', updatedConversationList);
					},
					message: function(event){
						var message = event.message;
						if(message.targetId != decodeURI(getUrlParam('groupId'))){
							return;
						}
						_this.messageList.push(message)
						_this.scrollBottom()
						var conversation = _this.$im.Conversation.get({
						  targetId: getUrlParam("groupId"),
						  type: RongIMLib.CONVERSATION_TYPE.GROUP
						});
						conversation.read().then(function(){
						  console.log('清除未读数成功');
						});
						if(message.content.imageUri) {
							_this.images.push(message.content.imageUri)
						}
					},
					status: function(event){
						var status = event.status;
					}
				})
				uni.setNavigationBarTitle({
					title:_this.groupName
				})
				_this.getgroupMembers().then((result)=>{
					if(result.length <= 0){
						uni.showToast({
							title:'您已被移出群组！',
							icon:'none',
							duration: 2000,
							success() {
								setTimeout(()=>{
									uni.navigateBack({
										delta: 1
									})
								},2000)
							}
						})
						//不在群组内
						return;
					}else{
						_this.getMessage().then(()=>{
							_this.scrollBottom()
						})
						_this.$api.getUserInfo().then((res)=>{
							if(res.data.returnCode == 200){
								_this.data = res.data.result
							}  
						})
					}
				});
			},
			// 播放语音
			playVoice(item,index){
				let _this = this
				let time = item.content.time
				_this.$set(_this.messageList[index],'play',true)
				_this.$wx.downloadVoice(item.content.remoteUrl,function(res){
					_this.$wx.playVoice(res.localId,function(a){
						let timeInt = setInterval(function(){
							time--
							if(time <= 0){
								clearInterval(timeInt)
								_this.$set(_this.messageList[index],'play',false)
							}
						},1000)
					}); 	
				})
			},
			handletouchstart(e) { 
				let _this = this;
				clearTimeout(timeOutEvent);//清除定时器
				timeOutEvent = 0;
				_this.isTouch = true
				_this.startTime = new Date().getTime();
				timeOutEvent = setTimeout(function(){
					try  {
						 var touch = e.touches[0];  //获取第一个触点
						 _this.startY = Number(touch.pageY);
					 }  catch  (e) {
						 console.log( 'touchSatrtFunc：'  + e.message);
					 }
					 _this.showVioceLoading = true;
					 _this.$wx.startRecord(function(res){
					 	_this.startTime = new Date().getTime();
					 	var voiceTime = 0
					 	var voiceInt = setInterval(()=>{
					 		voiceTime++
					 		// vant.Toast(voiceTime)
					 		if(voiceTime>58){
					 			_this.isTouch = false
					 			clearInterval(voiceInt);
					 			_this.showVioceLoading = false;
					 			_this.$wx.stopRecord(function(stopres){
					 				_this.$wx.uploadVoice(stopres.localId,function(uploadRes){
					 					var conversation = _this.$im.Conversation.get({
					 						targetId: getUrlParam("groupId"),
					 						type: RongIMLib.CONVERSATION_TYPE.GROUP
					 					});
					 					const obj = {
					 						content: stopres.localId, 
					 						remoteUrl: uploadRes.serverId, 
					 						type: 'vioceMsg',
					 						time: (new Date().getTime() - _this.startTime)/1000 ,
					 						user:{
					 							id:localStorage.IMCOEDID,
					 							portraitUri:_this.data.headPicture,
					 							name:_this.data.realName,
					 						},
					 						groupinfo:{
					 							id:_this.groupId,
					 							name:_this.groupName,
					 							portraitUri:'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/sms/user/2020/11/29ac15f982ef4d5780c7452ae3ca5610.png',
					 						},
					 						senderUserId:localStorage.IMCOEDID
					 					}
					 					conversation.send({
					 						messageType: RongIMLib.MESSAGE_TYPE.HQ_VOICE, // 'RC:HQVCMsg'
					 						content: obj
					 					}).then(function(message){
					 						_this.messageList.push({content: obj,senderUserId:localStorage.IMCOEDID})
					 						console.log('发送语音消息成功', message);
					 					});
					 				})
					 			});
					 		}
					 	},1000)
					 });
				},600)
			},  
			handletouchend() {
				let _this = this;
				clearTimeout(timeOutEvent);
				if (new Date().getTime() - _this.startTime < 1000) {
					uni.showToast({title:'录制时间太短',icon:'none'})
					_this.startTime = 0;
					_this.showVioceLoading = false;
					_this.isTouch = false
					return;
				} else {
					_this.showVioceLoading = false;
					_this.isTouch = false
					_this.$wx.stopRecord(function(stopres){
						_this.$wx.uploadVoice(stopres.localId,function(uploadRes){
							var conversation = _this.$im.Conversation.get({
								targetId: getUrlParam("groupId"),
								type: RongIMLib.CONVERSATION_TYPE.GROUP
							});
							uni.showToast({title:stopres.localId,icon:'none'})
							const obj = {
								content: stopres.localId, 
								remoteUrl: uploadRes.serverId, 
								type: 'vioceMsg',
								time: (new Date().getTime() - _this.startTime)/1000 ,
								user:{
									id:localStorage.IMCOEDID,
									portraitUri:_this.data.headPicture,
									name:_this.data.realName,
								},
								groupinfo:{
									id:_this.groupId,
									name:_this.groupName,
									portraitUri:'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/sms/user/2020/11/29ac15f982ef4d5780c7452ae3ca5610.png',
								},
								senderUserId:localStorage.IMCOEDID
							}
							conversation.send({
								messageType: RongIMLib.MESSAGE_TYPE.HQ_VOICE, // 'RC:HQVCMsg'
								content: obj
							}).then(function(message){
								_this.messageList.push({content: obj,senderUserId:localStorage.IMCOEDID})
								console.log('发送语音消息成功', message);
							});
						})
					});
				}
			},  
			handletouchmove(e) {  
				const _this = this;
				var touch = e.touches[0];  //获取第一个触点
				var movePageY = Number(touch.pageY)
				if(_this.startY - movePageY > 100){
					_this.showVioceLoading = false;
					_this.isTouch = false
					_this.$wx.stopRecord()
				}
			},  
			getgroupMembers(){
				return new Promise((resolve, reject)=>{
					const _this = this;
					const result = this.$api.groupMembers({groupId:getUrlParam('groupId')}).then((res)=>{
						this.groupLeader = res.data.result.length>0 && res.data.result.filter((a)=>{return a.groupLeader})[0].userId //过滤出群主
						const hasPeople = res.data.result.filter((a)=>{return a.userId == getUrlParam('senderUserId')})//判断是否在群组里面
						return hasPeople
					})
					resolve(result)
				})
			},
			showMoreOperation(){
				return new Promise((resolve, reject) => {
				  this.judeg = !this.judeg
				    resolve('success');
				});
			},
			// blob转base64
			blobToBase64(blob) {
			  return new Promise((resolve, reject) => {
			    const fileReader = new FileReader();
			    fileReader.onload = (e) => {
			      resolve(e.target.result);
			    };
			    // readAsDataURL
			    fileReader.readAsDataURL(blob);
			    fileReader.onerror = () => {
			      reject(new Error('blobToBase64 error'));
			    };
			  });
			},
			// 选择图片发送
			chooseImg(){
				const _this = this;
				_this.$wx.chooseImage(function(res){
					res.localIds && res.localIds.map((ares)=>{
						_this.$wx.uploadImage(ares,function(bres){
							_this.$api.getImage(bres.serverId).then((cres)=>{
								_this.sendImgmessage(cres.data.result.url).then(data=>{
									if(data){
										_this.judeg = true;
										_this.scrollBottom()
									}
								})
							})
						})
					})
				})
			},
			// 相机
			cameraImg(){
				const _this = this;
				uni.chooseImage({
				    count: 6, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['camera'], //相机
				    success: function (res) {
						res.tempFilePaths.map((a)=>{
							pathToBase64(a)
							.then(path => {
								var file = _this.dataURLtoFile(path, 'file.png');
								_this.$api.uploadImg({file:file,type:12}).then((response)=>{
									if(response.returnCode == 200){
										_this.sendImgmessage(response.result.url).then(data=>{
											if(data){
												_this.judeg = true;
												_this.scrollBottom()
											}
										})
									}
								})
							})
							.catch(error => {
								console.error(error)
							})
						})
				    }
				});
			},
			dataURLtoFile(dataurl, filename) {
				var arr = dataurl.split(','),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new File([u8arr], filename, { type: mime });
			},
			// 发送图片消息
			sendImgmessage(Url){
				const _this = this;
				return new Promise(function(resolve,reject){
					var conversation = _this.$im.Conversation.get({
					  targetId: _this.groupId,
					  type: RongIMLib.CONVERSATION_TYPE.GROUP
					});
					const obj = {
						content: Url, // // 压缩后的 base64 略缩图, 用来快速展示图片
						imageUri: Url, // 上传到服务器的 url. 用来展示高清图片
						type: 'imgMsg',
						user:{
							id:localStorage.IMCOEDID,
							portraitUri:_this.data.avatarAddress  || 'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/portrait/2020/11/9472ab92fe90400fbee424c2d6b02fb0.png',
							name:_this.data.realName,
						},
						groupinfo:{
							id:_this.groupId,
							name:_this.groupName,
							portraitUri:'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/sms/user/2020/11/29ac15f982ef4d5780c7452ae3ca5610.png',
						}
					}
					conversation.send({
					  messageType: RongIMLib.MESSAGE_TYPE.IMAGE, // 'RC:ImgMsg'
					  content: obj
					}).then(function(message){
						_this.messageList.push({content:obj,senderUserId:localStorage.IMCOEDID});
						_this.images.push(Url)
						console.log('发送图片消息成功', _this.messageList);
						resolve(message)
					});
				});
			},
			scrollBottom(){
				var container = this.$el.querySelector('.box');
				this.$el.querySelector('.box').scrollTop = container.scrollHeight + 100
			},
			getboxHeight(){
				return new Promise((resolve,reject)=>{
					setTimeout(()=>{
						let info = uni.createSelectorQuery().select(".box");
			　　　  　   info.boundingClientRect(function(data) { //data - 各种参数
							if(data.height){
								resolve(data.height)
							}else{
								reject()
							}
			　　    	}).exec()
					},200)
				})
			},
			sendmessage(){
				return new Promise((resolve,reject)=>{
					const _this = this;
					if(!_this.message){
						uni.showToast({title: '不能发送空内容',icon:'none'})
						reject()
						return;
					}
					var conversation = _this.$im.Conversation.get({
					  targetId: _this.groupId,
					  type: RongIMLib.CONVERSATION_TYPE.GROUP
					});
					const obj = {
						content: _this.message,// 文本内容
						type:'groupMsg',
						contentType:'text',
						user:{
							id:localStorage.IMCOEDID,
							portraitUri:_this.data.avatarAddress  || 'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/portrait/2020/11/9472ab92fe90400fbee424c2d6b02fb0.png',
							name:_this.data.realName,
						},
						groupinfo:{
							id:_this.groupId,
							name:_this.groupName,
							portraitUri:'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/sms/user/2020/11/29ac15f982ef4d5780c7452ae3ca5610.png',
						}
					}
					conversation.send({
					  messageType: RongIMLib.MESSAGE_TYPE.TEXT, // 'RC:TxtMsg'
					  content: obj
					}).then(function(message){
						_this.messageList.push({content:obj,senderUserId:localStorage.IMCOEDID})
						_this.message = ''
						console.log('发送文字消息成功', message);
						resolve(message)
					});
				})
			},
			getMessage(date){
				// this.messageList = [];
				uni.showLoading({
					title:'加载中...'
				})
				return new Promise((resolve,reject)=>{
					const _this = this;
					var conversation = _this.$im.Conversation.get({
						targetId: getUrlParam("groupId"),
						type: RongIMLib.CONVERSATION_TYPE.GROUP
					});
					const NEWDATE = +new Date();
					var option = {
						timestrap: date?date:NEWDATE,
						count: 5
					};
					conversation.getMessages(option).then(function(result){
						var list = result.list; // 历史消息列表
						var hasMore = result.hasMore; // 是否还有历史消息可以获取
						_this.messageList = list.concat(_this.messageList);
						var conversation = _this.$im.Conversation.get({
						  targetId: getUrlParam("groupId"),
						  type: RongIMLib.CONVERSATION_TYPE.GROUP
						});
						conversation.read().then(function(){
						  console.log('清除未读数成功'); // im.watch conversation 将被触发
						});
						uni.stopPullDownRefresh();
						uni.hideLoading();
						list.forEach((a)=>{
							if(a.content.groupstatus == "editgroupName"){
								uni.setNavigationBarTitle({
									title:a.content.content.substr(8)
								})
								_this.groupName = a.content.content.substr(8)
							}
                            if(a.content.imageUri){
                                _this.images.push(a.content.imageUri)
                            }
                        })
						console.log('获取历史消息成功', list, hasMore);
					});
				})
			},
			onInput(e) {
				if(e.detail.value != '') {
					this.messageNone = true
				}else {
					this.messageNone = false
				}
			},
			inputContent(e) {
				if(e.target.lineCount >= 5) {
					this.wordWrap = false;
				}
			},
			changeImage() {
				this.showImage = !this.showImage
			},
			// 点击头像进入会员详情
			toUserInfo(item) {
				if(item.content.user.id.substr(0,3) == 'Hlh'){
					return;
				}
				this.$api.decode({code:item.content.user.id.substr(4)}).then((res)=>{
					uni.navigateTo({
						url:'/pages/member/memberDetail?id='+res.data.message
					})
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	*{
		-webkit-touch-callout:none;  /*系统默认菜单被禁用*/   
		-webkit-user-select:none; /*webkit浏览器*/   
		-khtml-user-select:none; /*早期浏览器*/   
		-moz-user-select:none;/*火狐*/   
		-ms-user-select:none; /*IE10*/   
		user-select:none;   
	}
	.chat {
		height: calc(100vh - 88upx);
		display: flex;
		flex-flow: column;
		background: #FFFFFF;
		view{
			overflow: hidden;
		}
		.box {
			padding: 21upx 24upx 0;
			overflow-y: auto;
			flex:1;
			padding-bottom: 100upx;
		}
		.voice-icon{
			display: inline-block;
			width: 40upx !important;
			margin: 0 !important;
			vertical-align: -10upx;
		}
		.left{
			display: flex;
			margin-top: 26upx;
			width: 100%;
			view{
				width: 100%;
				display: flex;
				image{
					width: 200upx;
					height: auto;
					margin:0 46upx 0 26upx;
				}
				image.tx {
					margin: 0;
					width: 62upx;
					height: 62upx;
					display: block;
				}
			}
			
			text {
				margin:0 120upx 0 26upx;
				padding:10upx 20upx;
				background-color: #F7F7F7;
				color: #333333;
				font-size: 24upx;
				position: relative;
				border-radius: 4upx;
				display: flex;
				align-items: center;
				max-width: 466upx;
				min-width:80upx;
			}
			text::before {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				left: -26upx;
				top: 17upx;
				border: 14upx solid;
				border-color: transparent #F7F7F7 transparent transparent;
			}
		}
		.right {
			float: right;
			margin-top: 26upx;
			width: 100%;
			view{
				display: flex;
				flex-flow: row-reverse;
				width: 100%;
				image{
					width: 200upx;
					height: auto;
					margin:0 46upx 0 26upx;
				}
				image.tx {
					width: 62upx;
					height: 62upx;
					display: block;
					margin: 0;
					float: right;
				}
			}
			
			text {
				float: right;
				margin:0 44upx 0 86upx;
				padding:10upx 20upx;
				background-color: #3CBE8A;
				color: #FFFFFF;
				font-size: 24upx;
				position: relative;
				border-radius: 4upx;
				display: flex;
				align-items: center;
				max-width: 466upx;
				min-width:80upx;
			}
			text::before {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				right: -26upx;
				top: 17upx;
				border: 14upx solid;
				border-color: transparent transparent transparent #3CBE8A;
			}
		}
		.footer {
			width: 750upx;
			background-color: #F6F6F6;
			.content {
				width: 750upx;
				box-sizing: border-box;
				padding:31upx 30upx;
				display: flex;
				align-items: center;
				image {
					width: 42upx;
					height: 42upx;
				}
				.voiceBtn{
					display: block;
					background-color: #FFFFFF;
					min-height: 40upx;
					margin: 0 37upx;
					flex: 1;
					border-radius: 6upx;
					padding:20upx 10upx;
					font-size: 26upx;
					max-height: 190upx;
					text-align: center;
					-webkit-touch-callout:none;
					-webkit-user-select:none;
					-khtml-user-select:none;
					-moz-user-select:none;
					-ms-user-select:none;
					user-select:none;
					&.on{
						background: #ccc;color: #fff;
					}
				}
				textarea {
					display: block;
					background-color: #FFFFFF;
					min-height: 40upx;
					margin: 0 37upx;
					flex: 1;
					border-radius: 6upx;
					padding:20upx 10upx;
					font-size: 26upx;
					max-height: 190upx;
				}
				text {
					background-color: #3CBE8A;
					padding: 8upx 16upx;
					color: #FFFFFF;
					font-size: 26upx;
					border-radius: 4upx;
					margin-left: 20upx;
				}
			}
			.function {
				display: flex;
				padding: 45upx 0 58upx;
				background-color: #F6F6F6;
				margin: 0 52upx;	
				image {
					width: 124upx;
					height: 124upx;
					margin-right: 51upx;
				}
				image:last-child {
					margin-right: 0;
				}
			}
		}
	}
	uni-textarea {
		height: 0;
	}
	.voice-loading{
		position: fixed;
		width: 320upx;
		height: 320upx;
		background: rgba(0, 0, 0, 0.7);
		top: 38vh;
		left: 215upx;
		border-radius: 20upx;
		display: flex;
		align-items: center;
		image{
			width: 250upx;
			display: block;
			margin: 0 auto;
		}
	}
</style>
